<!DOCTYPE html>
<html>
<head>
  <title>Shop Floor Monitor</title>
  <meta name="description" content="A state monitoring diagram." />
  <!-- Copyright 1998-2016 by Northwoods Software Corporation. -->
  <meta charset="UTF-8">
  <script src="go.js"></script>
  <link href="../assets/css/goSamples.css" rel="stylesheet" type="text/css" />  <!-- you don't need to use this -->
  <script src="goSamples.js"></script>  <!-- this is only for the GoJS Samples framework -->
  <script id="code">
    function init() {
      if (window.goSamples) goSamples();  // init for these samples -- you don't need to call this
      var $ = go.GraphObject.make;  // for conciseness in defining templates

      myDiagram =
        $(go.Diagram, "myDiagramDiv",
          { "animationManager.isEnabled": false,
            initialContentAlignment: go.Spot.Center
          });

      // conversion functions for Bindings in the Node template:

      function nodeTypeImage(type) {
        switch (type) {
          case "S2": return "images/voice atm switch.jpg";
          case "S3": return "images/server switch.jpg";
          case "P1": return "images/general processor.jpg";
          case "P2": return "images/storage array.jpg";
          case "M4": return "images/iptv broadcast server.jpg";
          case "M5": return "images/content engine.jpg";
          case "I1": return "images/pc.jpg";
          default: return "images/pc.jpg";
        }
        if (type.charAt(0) === "S") return
        if (type.charAt(0) === "P") return "images/general processor.jpg";
        if (type.charAt(0) === "M")
        return "images/pc.jpg";
      }

      function nodeProblemConverter(msg) {
        if (msg) return "red";
        return null;
      }

      function nodeOperationConverter(s) {
        if (s >= 2) return "TriangleDown";
        if (s >= 1) return "Rectangle";
        return "Circle";
      }

      function nodeStatusConverter(s) {
        if (s >= 2) return "red";
        if (s >= 1) return "yellow";
        return "green";
      }

      myDiagram.nodeTemplate =
        $(go.Node, "Vertical",
          { locationObjectName: "ICON" },
          new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
          $(go.Panel, "Spot",
            $(go.Panel, "Auto",
              { name: "ICON" },
              $(go.Shape,
                { fill: null, stroke: null },
                new go.Binding("background", "problem", nodeProblemConverter)),
              $(go.Picture,
                { margin: 5 },
                new go.Binding("source", "type", nodeTypeImage))
            ),  // end Auto Panel
            $(go.Shape, "Circle",
              { alignment: go.Spot.TopLeft, alignmentFocus: go.Spot.TopLeft,
                width: 12, height: 12, fill: "orange" },
              new go.Binding("figure", "operation", nodeOperationConverter)),
            $(go.Shape, "Triangle",
              { alignment: go.Spot.TopRight, alignmentFocus: go.Spot.TopRight,
                width: 12, height: 12, fill: "blue" },
              new go.Binding("fill", "status", nodeStatusConverter))
          ),  // end Spot Panel
          $(go.TextBlock,
            new go.Binding("text"))
        );  // end Node


      // conversion function for Bindings in the Link template:

      function linkProblemConverter(msg) {
        if (msg) return "red";
        return "gray";
      }

      myDiagram.linkTemplate =
        $(go.Link, go.Link.AvoidsNodes,
          { corner: 3 },
          $(go.Shape,
            { strokeWidth: 2, stroke: "gray" },
            new go.Binding("stroke", "problem", linkProblemConverter))
        );

      load();


      // simulate some real-time problem monitoring, once every two seconds:
      function randomProblems() {
        var model = myDiagram.model;
        // update all nodes
        var arr = model.nodeDataArray;
        for (var i = 0; i < arr.length; i++) {
          data = arr[i];
          data.problem = (Math.random() < 0.8) ? "" : "Power loss due to ...";
          data.status = Math.random() * 3;
          data.operation = Math.random() * 3;
          model.updateTargetBindings(data);
        }
        // and update all links
        arr = model.linkDataArray;
        for (i = 0; i < arr.length; i++) {
          data = arr[i];
          data.problem = (Math.random() < 0.7) ? "" : "No Power";
          model.updateTargetBindings(data);
        }
      }
      function loop() {
        setTimeout(function() { randomProblems(); loop(); }, 2000);
      }
      loop();  // start the simulation
    }

    function load() {
      myDiagram.model = go.Model.fromJson(document.getElementById("mySavedModel").value);
    }
  </script>
</head>
<body onload="init()">
<div id="sample">
  <h3>GoJS Shop Floor Monitor</h3>
  <div id="myDiagramDiv" style="border: solid 1px black; width:80%; height:400px"></div>
  <p>
    This monitoring diagram continuously shows the state of a number of stations on an imaginary shop floor.
    Every two seconds it updates the display, showing some random problems via highlighting.
    You can add nodes and links by adding data to the model text below and then clicking "Load".
  </p>
  <button onclick="load()">Load</button>
  <br />
  <textarea id="mySavedModel" style="width:100%;height:300px">
{ "nodeDataArray": [
{"key":"1", "text":"Switch 23", "type":"S2", "loc":"195 225"},
{"key":"2", "text":"Machine 17", "type":"M4", "loc":"183.5 94"},
{"key":"3", "text":"Panel 7", "type":"P2", "loc":"75 211.5"},
{"key":"4", "text":"Switch 24", "type":"S3", "loc":"306 225"},
{"key":"5", "text":"Machine 18", "type":"M5", "loc":"288.5 95"},
{"key":"6", "text":"Panel 9", "type":"P1", "loc":"426 211"},
{"key":"7", "text":"Instr 3", "type":"I1", "loc":"-50 218"} ],
  "linkDataArray": [
{"from":"1", "to":"2"},
{"from":"1", "to":"3"},
{"from":"1", "to":"4"},
{"from":"4", "to":"5"},
{"from":"4", "to":"6"},
{"from":"7", "to":"2"},
{"from":"7", "to":"3"}
 ]}
 </textarea>
    <p>
        For another monitoring example, see the <a href="kittenMonitor.html">Kitten Monitor</a> sample.
    </p>
</div>
</body>
</html>